<script lang="ts" setup>
import { repository } from '~/../package.json'
import { toggleDark } from '~/composables'
</script>

<template>
  <el-menu
    class="el-menu-wrap"
    mode="horizontal"
    :ellipsis="false"
    router
    :default-active="$route.path"
  >
    <!-- <el-sub-menu index="2">
      <template #title>
       页面1
      </template>
      <el-menu-item index="2-1">
        页面1-1
      </el-menu-item>
      <el-menu-item index="2-2">
        页面1-2
      </el-menu-item>
      <el-menu-item index="2-3">
        页面1-3
      </el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>
          页面1-4
        </template>
        <el-menu-item index="2-4-1">
          页面1-4-1
        </el-menu-item>
        <el-menu-item index="2-4-2">
          页面1-4-2
        </el-menu-item>
      </el-sub-menu>
    </el-sub-menu> -->
    <div class="left-wrap">
      智能学伴
    </div>
    <div class="middle-wrap">
      <el-menu-item index="/">
        首页
      </el-menu-item>
      <el-menu-item index="/intelligent-qa">
        智能问答
      </el-menu-item>
      <el-menu-item index="/script-analysis">
        脚本分析
      </el-menu-item>
      <el-menu-item index="/homework-submission">
        作业提交
      </el-menu-item>
      <el-menu-item index="/ability-assessment">
        能力评估
      </el-menu-item>
      <el-menu-item index="/learning-records">
        学习记录
      </el-menu-item>
      <el-menu-item index="/job-recommendation">
        就业推荐
      </el-menu-item>
    </div>
    <div class="right-wrap">
      欢迎同学
    </div>
    <!-- <el-menu-item h="full" @click="toggleDark()">
      <button
        class="w-full cursor-pointer border-none bg-transparent"
        style="height: var(--ep-menu-item-height)"
      >
        <i inline-flex i="dark:ep-moon ep-sunny" />
      </button>
    </el-menu-item> -->

    <!-- <el-menu-item h="full">
      <a
        class="size-full flex items-center justify-center"
        :href="repository.url"
        target="_blank"
      >
        <div i-ri-github-fill />
      </a>
    </el-menu-item> -->
  </el-menu>
</template>

<style lang="scss">
.el-menu-wrap {
  position: sticky;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .left-wrap {
    color: #589ef8;
    font-weight: 600;
    font-size: 24px;
  }

  .middle-wrap {
    display: flex;

    gap: 20px;
    .ep-menu-item {
      padding: 10px 16px;
      height: auto;
      font-size: 16px;
      line-height: inherit;
    }
    .ep-menu-item.is-active {
      border-radius: 4px;
      background-color: rgb(238.3, 245.3, 254.3);
    }
  }

  .right-wrap {
    font-size: 16px;
  }
}
</style>
